<template>
  <div class="main-info-com-box">
    <div class="title">
      <div>任务数据</div>
    </div>
    <div class="main-box">
      <div class="item">
        <div class="item-title">舆论走势</div>
        <div class="item-content" ref="lineChart"></div>
      </div>
      <div class="item">
        <div class="item-title">媒体活跃占比</div>
        <div class="item-content" ref="pieChart"></div>
      </div>
      <div class="item">
        <div class="item-title">词云</div>
        <div class="item-content" ref="wordCloud"></div>
      </div>
      <div class="item">
        <div class="item-title">
          新闻热点
        </div>
        <div class="news-box">

          <div class="new-inner-box">
            <div class="new-item" v-for="item in newsList" :key="item.date">
              <div class="new-title">{{ item.title }}</div>
              <div class="new-date">{{ item.date }}</div>
            </div>
            <div class="new-item" v-for="item in newsList" :key="item.date">
              <div class="new-title">{{ item.title }}</div>
              <div class="new-date">{{ item.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts-wordcloud'
import 'animate.css';
export default {
  name: 'MainInfoCom',
  data() {
    return {
      newsList: [
        {
          title: '山西和焚烧冥币等用品惹争议，多地...',
          date: '2025-07-28'
        },
        {
          title: '布林肯宣布悬赏 500 万美元通缉一中国公民，外...',
          date: '2025-07-29'
        },
        {
          title: '人乳交易乱象：一些成年男子自称想 “补身体”...',
          date: '2025-07-30'
        },
        {
          title: '中央网信办：取消明星艺人榜单，严禁呈现互撕...',
          date: '2025-07-31'
        },
        {
          title: '残奥会 - 要首还是金牌！女子 50 米自 S11 马佳破世...',
          date: '2025-08-01'
        },
        {
          title: '2025年8月2日 10:00:00',
          date: '2025-08-02'
        },
        {
          title: '2025年8月3日 10:00:00',
          date: '2025-08-03'
        },
        {
          title: '2025年8月4日 10:00:00',
          date: '2025-08-04'
        },
        {
          title: '2025年8月5日 10:00:00',
          date: '2025-08-05'
        },
        {
          title: '2025年8月6日 10:00:00',
          date: '2025-08-06'
        }
      ],
      currentList: []
    }
  },
  methods: {
    initLineChart() {
      var lineChart = this.$echarts.init(this.$refs.lineChart)
      lineChart.setOption({
        tooltip: {
          // 触发方式：item数据项，axis坐标轴
          trigger: 'axis',
          // 坐标轴的指示器
          axisPointer: {
            // 指示器的类型，line，shadow
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['07-28', '07-29', '07-30', '07-31', '08-01', '08-02', '08-03'],
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            lineStyle: {
              color: '#fff'
            },
            itemStyle: {
              borderColor: '#ccc', // 设置点的边框颜色为红色，可按需修改
              borderWidth: 2 // 设置边框宽度
            },
            areaStyle: {
              color: '#4058af'
            },

          }
        ]
      })

    },
    initPieChart() {
      var pieChart = this.$echarts.init(this.$refs.pieChart);
      pieChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '0',
          right: '0',
          orient: 'vertical',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              // borderColor: '#fff',
              // borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '微博' },
              { value: 735, name: '贴吧' },
              { value: 580, name: '抖音' },
            ]
          }
        ]
      })
    },
    initWordCloudChart() {
      var myChart = this.$echarts.init(this.$refs.wordCloud)
      myChart.setOption({
        series: [{
          // 类型
          type: 'wordCloud',
          // 词云图中的文字间距，数值越小，排列越紧密
          gridSize: 1,
          // 文字大小范围,属性值为数组，分别表示下限和上限
          sizeRange: [12, 30],
          // 文字的旋转角度
          rotationRange: [-90, 90],
          // 旋转角度的间隔
          rotationStep: 45,
          // 词云的形状,circle默认，
          // 三角的英文 triangle
          shape: 'circle',
          // 字体样式
          textStyle: {
            normal: {
              /*               color: function () {
                              var red = Math.round(Math.random() * 255);
                              var green = Math.round(Math.random() * 255);
                              var blue = Math.round(Math.random() * 255);
                              return `rgb(${red},${green},${blue})`
                            } */
              color: '#1bf5a6',

            },
            emphasis: {
              color: 'red'
            }
          },
          // 宽高，支持px，%
          width: '100%',
          height: '100%',
          // 鼠标移入样式
          emphasis: {
            textStyle: {
              color: 'red'
            }
          },
          data: [
            {
              name: ' 平台 ',
              value: 78
            },
            {
              name: ' 印度 ',
              value: 65
            },
            {
              name: ' 发现 ',
              value: 82
            },
            {
              name: ' 发展 ',
              value: 91
            },
            {
              name: ' 北京 ',
              value: 73
            },
            {
              name: ' 问题 ',
              value: 69
            },
            {
              name: ' 确诊 ',
              value: 88
            },
            {
              name: ' 病例 ',
              value: 76
            },
            {
              name: ' 表示 ',
              value: 62
            },
            {
              name: ' 中国 ',
              value: 100
            },
            {
              name: ' 美国 ',
              value: 80
            },
            {
              name: ' 疫情 ',
              value: 71
            },
            {
              name: ' 没有 ',
              value: 67
            },
            {
              name: ' 工作 ',
              value: 84
            },
            {
              name: ' 消息 ',
              value: 77
            },
            {
              name: ' 微博 ',
              value: 92
            },
            {
              name: ' 百度 ',
              value: 64
            },
            {
              name: 'com',
              value: 79
            },
            {
              name: ' 上海 ',
              value: 86
            },
            {
              name: ' 核酸 ',
              value: 74
            },
            {
              name: ' 朋友 ',
              value: 61
            },
            {
              name: ' 公司 ',
              value: 83
            },
            {
              name: ' 企业 ',
              value: 70
            },
            {
              name: ' 进口 ',
              value: 66
            },
            {
              name: ' 进行 ',
              value: 87
            },
            {
              name: ' 多地 ',
              value: 72
            },
            {
              name: ' 新增 ',
              value: 63
            },
            {
              name: ' 人员 ',
              value: 85
            },
            {
              name: ' 时间 ',
              value: 75
            },
            {
              name: ' 日期 ',
              value: 68
            },
            {
              name: ' 旅游 ',
              value: 89
            },
            {
              name: ' 感染 ',
              value: 90
            },
            {
              name: ' 新闻 ',
              value: 72
            },
            {
              name: ' 海关 ',
              value: 60
            },
            {
              name: ' 隔离 ',
              value: 81
            },
            {
              name: ' 疫苗 ',
              value: 93
            },
            {
              name: ' 数据 ',
              value: 94
            }
          ]
        }]
      })
    },
    initNews() {
      setInterval(() => {
        var item = this.newsList.shift();
        this.newsList.push(item);

      }, 4000)
    },
    setAnimationDuration() {
      const content = document.querySelector('.news-box');
      const contentHeight = content.scrollHeight / 2; // 因为我们复制了一份内容
      const speed = 50;
      const duration = contentHeight / speed;

      content.style.animationDuration = `${duration}s`;
    }

  },
  mounted() {

    this.initLineChart();
    this.initPieChart();
    this.initWordCloudChart();
    this.setAnimationDuration();
  }
}
</script>

<style lang="less" scoped>
* {
  color: white;
}

.main-info-com-box {

  width: 800px;
  height: 600px;
  background: url('@/assets/image/screen-border.png');
  background-size: 100% 100%;
}

.title {
  margin-top: 10px;
  width: 100%;

  background-image: url(@/assets/image/title-bg.png);

  >div {
    width: 70px;
    margin: 0 auto;
    font-size: 16px;
  }
}

.main-box {
  display: flex;
  justify-content: space-between;
  // 换行
  flex-wrap: wrap;

  .item {
    height: 265px;
    width: 380px;
    // background: #ccc;
    margin: 10px 10px;

    .item-title {
      text-align: center;
      font-size: 18px;
    }

    .item-content {
      height: 240px;
      width: 360px;
      display: block;
      margin: 0 auto;
    }
  }
}

.new-item {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;

  .new-title {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .new-date {
    width: 80px;
  }
}

.news-box {
  height: 200px;
  /* 限制显示区域高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  position: relative;
  margin-top: 20px;
}

.new-inner-box {
  animation: scroll-up 20s linear infinite;
  /* 关键：无限滚动动画 */

  /* 悬停时暂停动画 */
  &:hover {
    animation-play-state: paused;
  }
}

.new-item {
  font-size: 14px;
  color: #fff;
  margin-top: 15px;

  &.divider {
    color: rgba(255, 255, 255, 0.5);
  }
}


/* 关键帧动画：向上滚动 */
@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
    /* 因为我们复制了一份内容，所以只需滚动50%高度 */
  }
}
</style>
